import React, { memo, useState, useEffect } from 'react'
import { Divider, Typography, Button, message, Image, List, Space, Avatar,Input} from 'antd';
import remarkGfm from 'remark-gfm'
import Markdown from 'react-markdown'
import { mark } from './mark.js';
import copy from 'copy-to-clipboard';
import { HeartOutlined, HeartFilled, LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
import './details.css'
import { useParams, useLocation, useSearchParams } from 'react-router-dom';
import { shareWay, redirectUrl, getDetailById, getDz, cancelDz, getPlList,PlDetail,DelPlDetail } from '../../api/detail';
const { Title, Paragraph, Text, Link } = Typography;
const blockContent = `AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。
我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。`;



const details = memo(() => {
  const params = useParams()
  const { TextArea } = Input;
  const [detailObj, SetDetailObj] = useState({})
  let [searchParams, setSearchParams] = useSearchParams()
  const data = Array.from({
    length: 23,
  }).map((_, i) => ({
    href: 'https://ant.design',
    title: `ant design part ${i}`,
    avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,
    description:
      'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    content:
      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  }));
  const [dataarr, setDataarr] = useState([])
  const IconText = ({ icon, text }) => (
    <Space>
      {React.createElement(icon)}
      {text}
    </Space>
  );
  const [areaVal,setAreaVal]=useState('')
  const shareLink = function () {
    let url = window.location.href
    console.log(url)
    let user = JSON.parse(localStorage.getItem('userInfo'))
    shareWay({ Url: url }).then(res => {
      console.log(res)
      // redirectUrl({shortLink:res.data.result}).then(res=>{
      //   console.log(res)
      // })
      copy(res.data.result)
      message.success('复制成功')
    })
  }
  const GetQueryString = function (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return unescape(r[2]);
    }
    return null;
  }
  const getDetail = function (id) {
    getDetailById(id).then(res => {
      console.log(res)
      setTimeout(() => {
        SetDetailObj(res.data.result)
      }, 200);

      // console.log(res.data.result)
    })
  }
  const getAreaTxt=function(e){
    console.log('-----获取文本域值',e.currentTarget.value)
    setAreaVal(e.currentTarget.value)
  }
  const getDetailPl = function (id) {
    getPlList(id).then(res => {
      console.log('-------', res.data.result)
      let arrs = res.data.result
      arrs.map((item, index) => {
        item.avatar = `https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`
      })
      setDataarr(arrs)
    })
  }
  const dzdetail = function (n) {
    console.log(n)
    if (n == 1) {
      console.log(detailObj.id)
      // getDz()
      getDz({ id: detailObj.id }).then(res => {
        console.log(res)
        message.success("点赞成功")
        let ids = searchParams.get('id')
        getDetail(ids)
      })
    } else if (n == 0) {
      console.log(detailObj.id)
      console.log(detailObj.id)
      // getDz()
      cancelDz({ id: detailObj.id }).then(res => {
        console.log(res)
        message.success("点赞成功")
        let ids = searchParams.get('id')
        getDetail(ids)
        getDetailPl(ids)
      })
    }
  }
  const savePl=function(){
    console.log(detailObj.id)
    console.log(areaVal)
    if(areaVal.length!==0){
      PlDetail({BlogId:detailObj.id,Content:areaVal}).then(res=>{
        if(res.data.success==true){
          message.success('添加成功')
          let ids = searchParams.get('id')
          getDetail(ids)
          getDetailPl(ids)
          setAreaVal('')
        }else{
          message.error(res.data.errorMessage)
        }
      })
    }else{
      message.error('请填写评论内容')
    }
    

  }
  const delPlitem=function(item){
    console.log(item)
    DelPlDetail({
      id:detailObj.id,
      ids:item.id
    }).then(res=>{
      console.log(res)
      if(res.data.success==true){
        message.success('删除成功')
        let ids = searchParams.get('id')
        getDetail(ids)
        getDetailPl(ids)
      }else{
        message.error(res.data.errorMessage)
      }
    })
  }
  const location = useLocation();
  useEffect(() => {
    // console.log('路由参数',params)
    // console.log(searchParams.get('id'))
    let ids = searchParams.get('id')
    getDetail(ids)
    getDetailPl(ids)
  }, [])
  return (
    <div className='contentbox'>
      <div style={{ width: '80%', margin: '0 auto' }}>
        <div className='btnbox'>
          <HeartOutlined onClick={() => dzdetail(1)} className={detailObj.isLike == true ? 'hides' : ''} style={{ float: 'right', transform: 'scale(2)', marginLeft: '2%', marginTop: '5px' }} />
          <HeartFilled onClick={() => dzdetail(0)} className={detailObj.isLike == true ? '' : 'hides'} style={{ float: 'right', transform: 'scale(2)', marginLeft: '2%', marginTop: '5px' }} />
          <Button style={{ float: 'right' }} type="primary" onClick={shareLink}>分享</Button>
        </div>
        <div className='txtcss'>
          <div>标题:{detailObj.title}</div>
        </div>
        <div className='hei10'></div>
        <div className='txtcss'>
          <div>主图:</div>
          <div>
            <Image src={detailObj.mainImage} />
          </div>
        </div>
        <div className='hei10'></div>
        <div className='txtcss'>
          <div>作者:</div>
          <div>{detailObj.author}</div>
        </div>
        <div className='hei10'></div>
        <div className='txtcss'>
          <div>内容:</div>
        </div>
        <Markdown remarkPlugins={[remarkGfm]}>{detailObj.content}</Markdown>
        <div className='hei10'></div>
        <div className='plInput'>
          <TextArea value={areaVal} onChange={getAreaTxt} />
          <div className='hei10'></div>
          <Button type='primary' onClick={savePl}>发布</Button>
        </div>
        <div className='hei10'></div>
        <div className='pllist'>
          <List
            itemLayout="vertical"
            size="large"
            pagination={false}
            dataSource={dataarr}
            // footer={
            //   <div>
            //     <b>ant design</b> footer part
            //   </div>
            // }
            renderItem={(item) => (
              <List.Item
                key={item.id}
                actions={[
                  // <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                  // <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                  // <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
                  <span>{item.createTime}</span>
                ]}
              extra={
                // <img
                //   width={272}
                //   alt="logo"
                //   src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                // />
                <Button type="primary" danger ghost onClick={(e)=>delPlitem(item)}>删除</Button>
              }
              >
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={<a href='#'>{item.createName}</a>}

                />
                {item.content}
              </List.Item>
            )}
          />
        </div>
        {/* <Typography>

        <Title>介绍</Title>

        <Paragraph>
          蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
        </Paragraph>

        <Paragraph>
          随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系
          Ant Design。基于<Text mark>『确定』和『自然』</Text>
          的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于
          <Text strong>更好的用户体验</Text>。
        </Paragraph>

        <Title level={2}>设计资源</Title>

        <Paragraph>
          我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和
          <Text code>Axure</Text>），来帮助业务快速设计出高质量的产品原型。
        </Paragraph>

        <Paragraph>
          <ul>
            <li>
              <Link href="/docs/spec/proximity-cn">设计原则</Link>
            </li>
            <li>
              <Link href="/docs/spec/overview-cn">设计模式</Link>
            </li>
            <li>
              <Link href="/docs/resources-cn">设计资源</Link>
            </li>
          </ul>
        </Paragraph>

        <Paragraph>
          <blockquote>{blockContent}</blockquote>
          <pre>{blockContent}</pre>
        </Paragraph>

      </Typography> */}

      </div>
    </div>

  )
})
export default details

